<template>
  <div class="xui-preview-item">
    <DetailMenu>
      <a class="detail"><i :class="icon.nf_cod_ellipsis"></i></a>
    </DetailMenu>    
    <div class="preview" @dblclick.stop="one_click">
      <img :style="{content: imgUrl}" @error="onImgLoadError" />
    </div>
    <div class="description">
      <h1 :title="data.name">{{ data.name }}</h1>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, PropType, watch } from "vue"
import imgDefaultUrl from "/@/assets/icons/image-bmp.svg"
import { FileExtInfo } from "/@/utils/FileHelper"
import { icon_dir_default, get_icon_file } from './FiewView'
import icon from '/@/components/XUII/icon/index'
import DetailMenu from "./DetailMenu.vue"

const props = defineProps({
  data: {
    type: Object as PropType<FileExtInfo>,
    default: () => null,
  },
});

const emits = defineEmits(['item-click'])
const one_click = () => {
  emits('item-click', props.data)
}

let imgUrl = ref<string>("")

const get_url_var = (name: string) => {
    return `var(${name})`
}

const propsChange = (extinfo: FileExtInfo) => {
    if (extinfo.isDir) {
        imgUrl.value = get_url_var(icon_dir_default)
    } else {
        imgUrl.value = get_url_var(get_icon_file(extinfo.ext))
        // if (["jpg", "gif", "svg"].findIndex((x) => x === extinfo.ext) >= 0) {
        //     imgUrl.value = fs.getDownloadUrl(extinfo.fullName)
        // } else {
        //     imgUrl.value = '/src/assets/icons/mimetypes/unknown.svg'
        // }
    }
}
propsChange(props.data)

watch(() => props.data, extinfo => propsChange(extinfo))

const onImgLoadError = () => {
  console.log("error")
  imgUrl.value = imgDefaultUrl
};

</script>

<style lang="scss" scoped>
.xui-preview-item {
  width: 100px;
  height: 140px;
  padding: 1em;
  margin: 0.5em;
  position: relative;
  
  &:hover {
    background: #eee;
  }
  &:hover .dl-menuwrapper.detail{    
    visibility: inherit;
  }
  .detail {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    color: #179f84;
    font-size: 15px;
    padding: 5px;
    cursor: pointer;
    visibility: hidden;
  }
  .preview {
    height: 80px;
    display: flex;
    justify-content: center;
  }

  .description {
    h1 {
      text-align: center;
      font-weight: normal;
      font-size: 12px;
      overflow: hidden; //超出一行文字自动隐藏
      text-overflow: ellipsis;
      word-break: break-all;
    }
  }

}
</style>
